<template>
  <div class="equipment-move-box box-empty">
    <div class="return click-pointer" @click="onReturn">返回</div>
    <div class="equipment-move" style="margin-top: 15px">
      <div class="move-title">位置</div>
      <div class="show-area">
        <div class="show-area show-img" :style="backgroundImageStyle">
          <div id="container" style="width: 100%; height: 100%"></div>
          <div class="facility" @click="add">
            {{ placeData.name || "--" }} 设备号：{{
              placeData.device_code || "--"
            }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "25287497e8a6f7a6318f2c9ad03fe4ff", //填写你的安全密钥
};
export default {
  name: "imgMessage",
  components: {},
  data() {
    return {
      img: "46eccedadfc5f12a57f411883c155433cc7ca26480b0-lEed0D_fw1200webp.jpg",
      placeData: {},
      map: null, // 当前显示的地图区域对象
      AMap: null, // 拿到的所有的地图的对象
      mapData: [
        {
          scene_name: "测试",
          color: "rgb(255, 0, 13)",
          lng: 113.991682, // 经度
          lat: 29.249937, // 纬度
          // img:''
        },
      ], // 假数据，初始化是空数组
    };
  },
  computed: {
    backgroundImageStyle() {
      // 动态生成图像路径
      const imageUrl = require(`@/assets/img/${this.img}`);
      return {
        backgroundImage: `url(${imageUrl})`,
      };
    },
  },
  methods: {
    onReturn() {
      this.$router.go(-1);
    },
    add() {
      console.log(1);
    },
    initMap() {
      let load = AMapLoader.load({
        key: "36ee10ec4ccd5cea768c040433499406", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Marker", "AMap.Scale"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.AMap = AMap;
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 5, //初始化地图级别
            center: [105.602725, 37.076636], //初始化地图中心点位置
            features: ["road", "point"],
          });
          this.markPoints();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    markPoints() {
      this.mapData.forEach((item) => {
        // 创建一个 Marker 实例：
        const marker = new AMap.Marker({
          position: new AMap.LngLat(item.lng, item.lat), // 经纬度对象，也可以是经纬度构成的一维数组[lng, lat]
          // 使用 label 属性显示名称
          label: {
            content: item.name,
            // offset: new window.AMap.Pixel(20, -20), // 调整标签位置
            style: {
              color: "black",
              backgroundColor: "white",
              border: 0,
              padding: "2px",
            },
          },
        });
        // 将创建的点标记添加到已有的地图实例：
        this.map.add(marker);
        this.map.setFitView();
      });
    },
    wgs84ToGcj02(lat, lon) {
      const pi = 3.1415926535897932384626;
      const a = 6378245.0; // 长半轴
      const ee = 0.00669342162296594323; // 偏心率平方

      if (this.outOfChina(lat, lon)) {
        return [lat, lon]; // 不在中国范围内
      }

      const dLat = this.transformLat(lon - 105.0, lat - 35.0, pi);
      const dLon = this.transformLon(lon - 105.0, lat - 35.0, pi);
      const radLat = (lat / 180.0) * pi;

      const magic = Math.sin(radLat);
      const magic2 = 1 - ee * magic * magic;
      const sqrtMagic = Math.sqrt(magic2);

      const dLatAdjusted =
        (dLat * 180.0) / (((a * (1 - ee)) / (magic2 * sqrtMagic)) * pi);
      const dLonAdjusted =
        (dLon * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * pi);

      const mgLat = lat + dLatAdjusted;
      const mgLon = lon + dLonAdjusted;

      return [mgLat, mgLon];
    },

    outOfChina(lat, lon) {
      return !(lat > 0 && lat < 50 && lon > 73 && lon < 135);
    },

    transformLat(lon, lat, pi) {
      let ret =
        -100.0 +
        2.0 * lon +
        3.0 * lat +
        0.2 * lat * lat +
        0.1 * lon * lat +
        0.2 * Math.sqrt(Math.abs(lon));
      ret +=
        ((20.0 * Math.sin(6.0 * lon * pi) + 20.0 * Math.sin(2.0 * lon * pi)) *
          2.0) /
        3.0;
      ret +=
        ((20.0 * Math.sin(lat * pi) + 40.0 * Math.sin((lat / 3.0) * pi)) *
          2.0) /
        3.0;
      ret +=
        ((160.0 * Math.sin((lat / 12.0) * pi) +
          320.0 * Math.sin((lat * pi) / 30.0)) *
          2.0) /
        3.0;
      return ret;
    },

    transformLon(lon, lat, pi) {
      let ret =
        300.0 +
        lon +
        2.0 * lat +
        0.1 * lon * lon +
        0.1 * lon * lat +
        0.1 * Math.sqrt(Math.abs(lon));
      ret +=
        ((20.0 * Math.sin(6.0 * lon * pi) + 20.0 * Math.sin(2.0 * lon * pi)) *
          2.0) /
        3.0;
      ret +=
        ((20.0 * Math.sin(lon * pi) + 40.0 * Math.sin((lon / 3.0) * pi)) *
          2.0) /
        3.0;
      ret +=
        ((150.0 * Math.sin((lon / 12.0) * pi) +
          300.0 * Math.sin((lon / 30.0) * pi)) *
          2.0) /
        3.0;
      return ret;
    },
  },
  activated() {
    /**
     * lonLat：位置
     * name：设备名字
     * device_code：设备编号
     * scene_name：场景名称tab
     * */
    this.placeData = this.$route.query.res;
    let lonLat = this.$route.query.res.lonLat;
    const [gcjLat, gcjLon] = this.wgs84ToGcj02(Number(lonLat.split(",")[1]), Number(lonLat.split(",")[0]))
    if (lonLat) {
      this.mapData[0].lng = gcjLon;
      this.mapData[0].lat = gcjLat;
    }
    console.log(this.mapData[0], "1");
    this.initMap();
  },
};
</script>

<style scoped lang="scss">
/* 组件样式 */
</style>

<style scoped>
.return {
  box-shadow: inset 0px 0px 10px 0px rgba(0, 201, 255, 0.6);
  background: #03104c;
  width: 120px;
  height: 48px;
  line-height: 48px;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #3877f2;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  background-image: url("@/assets/img/fh.png");
  background-size: 24px;
  color: #ffffff;
  background-position: 10px center;
  background-repeat: no-repeat;
}

.show-img {
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #000;
  background-position: center;
}

.facility {
  font-size: 14px;
  color: #ffffff;
  font-weight: bold;
  background-image: url("@/assets/img/bjt.png");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 150px;
  text-align: center;
  margin: 20px 0 0 20px;
  font-weight: 300;
  min-width: 200px;
  max-width: 300px;
  z-index: 9999;
  top: 20px;
  position: absolute;
}
</style>
